<!-- 排序组件 -->
<template>
  <view class="sort" @click="sortClick">
    <view class="sort-item" :class="{ 'sort-active': show }">
      <text class="sort-item-title" @click.stop="sortClick">{{ arr[porps.sort].name }}</text>
      <uv-icon name="jiantou" custom-prefix="custom-icon" color="#fff" size="35rpx" @click.stop="sortClick"></uv-icon>
      <view class="sort-item-content" v-if="show">
        <text @click.stop="newSortClick">{{ arr.find(r => r.val !== porps.sort).name }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref, defineProps, defineEmits } from 'vue';
  import { onHide, onShow } from '@dcloudio/uni-app';
  let arr = [
    { name: '默认排序', val: 0 },
    { name: '最新排序', val: 1 }
  ];
  let show = ref(false);
  let sortClick = () => {
    show.value = !show.value;
  };
  let emits = defineEmits(['update:sort', 'sortChange']);
  let porps = defineProps({
    sort: {
      type: Number,
      default: 0
    }
  });
  let newSortClick = () => {
    emits('update:sort', arr.find(r => r.val !== porps.sort).val);
    emits('sortChange');
  };
</script>

<style lang="scss" scoped>
  .sort {
    font-size: 24rpx;
    color: #b1b1b1;
    margin: 0 44rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    &-item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px 10px 0;
      &-title {
        margin-right: 9rpx;
      }
      &-content {
        position: absolute;
        top: 100%;
        z-index: 9999;
        width: 100%;
        box-sizing: border-box;
        background-color: #393939;
        padding: 20px 10px;
        transition: all 0.3s;
      }
    }
    &-active {
      background-color: #393939;
    }
  }
</style>
